<template>
  <div class="view-wang-editor">
    <n-card>
      <n-h2 prefix="bar">
        <n-text type="primary"> wangEditor组件示例 </n-text>
      </n-h2>
      <n-space>
        <n-button
          @click="config.radius = !config.radius"
          :type="config.radius ? 'success' : 'default'"
          >圆弧</n-button
        >
        <n-button
          @click="config.border = !config.border"
          :type="config.border ? 'success' : 'default'"
          >边框</n-button
        >
        <n-button
          @click="config.showInfo = !config.showInfo"
          :type="config.showInfo ? 'success' : 'default'"
          >显示提示信息</n-button
        >
        <n-button
          @click="config.height = '400px'"
          :type="config.height === '400px' ? 'success' : 'default'"
          >默认高度：400px</n-button
        >
        <n-button
          @click="config.height = '200px'"
          :type="config.height === '200px' ? 'success' : 'default'"
          >改变高度：200px</n-button
        >
        <n-button
          @click="config.editorConfig.readOnly = false"
          :type="!config.editorConfig.readOnly ? 'success' : 'default'"
          >可写</n-button
        >
        <n-button
          @click="config.editorConfig.readOnly = true"
          :type="config.editorConfig.readOnly ? 'success' : 'default'"
          >只读</n-button
        >
        <n-button
          @click="isFullScreen = !isFullScreen"
          :type="isFullScreen ? 'success' : 'default'"
          >全屏</n-button
        >
        <n-button
          @click="isPreview = !isPreview"
          :type="isPreview ? 'success' : 'default'"
          >开启预览模式</n-button
        >
      </n-space>
    </n-card>
    <div class="wang-editor">
      <n-card>
        <n-h3 prefix="bar">
          <n-text type="primary"> 默认模式 </n-text>
        </n-h3>
        <pro-wang-editor
          v-model="value"
          v-model:isFullScreen="isFullScreen"
          v-model:isPreview="isPreview"
          v-bind="config"
          mode="default"
        />
      </n-card>
    </div>
    <div class="wang-editor">
      <n-card>
        <n-h3 prefix="bar">
          <n-text type="primary">
            (首选) iframe渲染 | pro-wang-html组件
          </n-text>
        </n-h3>
        <pro-wang-html :html="value"></pro-wang-html>
      </n-card>
    </div>
    <div class="wang-editor">
      <n-card>
        <n-h3 prefix="bar">
          <n-text type="primary"> v-html渲染 </n-text>
        </n-h3>
        <div v-html="value"></div>
      </n-card>
    </div>
    <div class="wang-editor">
      <n-card>
        <n-h3 prefix="bar">
          <n-text type="primary"> 简洁模式 </n-text>
        </n-h3>
        <pro-wang-editor v-model="value1" v-bind="config" mode="simple" />
      </n-card>
    </div>
  </div>
</template>

<script lang="ts" setup name="WangEditor">
const value = ref('')
const value1 = ref('')
const isFullScreen = ref(false)
const isPreview = ref(true)

const config = reactive({
  radius: true,
  border: true,
  showInfo: true,
  height: '400px',
  editorConfig: {
    readOnly: false
  }
})
</script>
<style lang="less" scoped>
.wang-editor {
  margin-top: 20px;
}
</style>
